<template>
  <div class="contentView" v-if="hoemShow" :style="`height:${contHeight}px`">
    <div calss="upperPart">
      <el-row :gutter="10" justify="space-between">
        <el-col :xl="4" :lg="4" :md="4" :sm="16" :xs="16">
          <el-card shadow="never">
            <div v-loading="loading">
              <div class="flex justify-between">
                <img :src="avatar" alt="" class="w-75px h-75px rounded-[50%]" />
                <div class="text-center cardUserName">
                  <span class="text-16px">{{ formatAxis(greetings) }}!</span>
                  <span class="text-17px text-700 pl-6px"> {{ username }}</span>
                  <div class="mt-12px">
                    <el-tag v-for="item in usersData" :key="item.id" class="mx-1" size="small">
                      {{ item.name }}</el-tag
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="8" :lg="8" :md="8" :sm="20" :xs="20">
          <el-card shadow="never">
            <div v-loading="loading">
              <div class="flex justify-between">
                <div class="text-center">
                  <div class="text-20px mb-18px mt-5px">待办事项</div>
                  <div class="messages">{{ messagesData[0] }}</div>
                </div>
                <div class="text-center">
                  <div class="text-20px mb-18px mt-5px">消息通知</div>
                  <div class="messages">{{ messagesData[1] }}</div>
                </div>
                <div class="text-center">
                  <div class="text-20px mb-18px mt-5px">异常信息</div>
                  <div class="messages">{{ messagesData[2] }}</div>
                </div>
                <div class="text-center">
                  <div class="text-20px mb-18px mt-5px">系统公告</div>
                  <div class="messages">{{ messagesData[3] }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <el-card shadow="never">
            <div v-loading="loading">
              <div class="functionPage">
                <div class="flex justify-between">
                  <div class="shortcut">快捷窗口</div>
                  <div class="edit" @click="editRef">编辑</div>
                </div>
                <div class="flex justify-between mt-6px">
                  <div
                    class="pageJump"
                    v-for="(item, index) in usepageData"
                    :key="index"
                    @click="jumpPage(item.componentName)"
                  >
                    <Icon :icon="item.icon" class="icon" :size="24" />
                    <div class="menuName">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row class="mt-10px" :gutter="10" justify="space-between">
      <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card shadow="never">
          <div v-loading="waitLoading">
            <div class="flex justify-between mb-10px">
              <el-text class="title">待办事项</el-text>
              <div v-if="waitData.length > 0">
                <el-pagination
                  background
                  @current-change="waitCurrentChange"
                  :current-page="waitParams.pageNo"
                  @size-change="waitSizeChange"
                  :page-size="waitParams.pageSize"
                  layout="prev, next"
                  :total="waitTotal"
                />
              </div>
            </div>
            <div v-if="waitData.length > 0">
              <div class="waitCard" :style="`height:calc(${contHeight}px*0.34)`">
                <div>
                  <el-scrollbar :height="`calc(${contHeight}px*0.34)`">
                    <div v-for="(item, index) in waitData" :key="index" class="waitTerm">
                      <div class="contentText">{{ item.content }}</div>
                      <div class="right">
                        <div>{{ formatDate(item.createTime) }}</div>
                        <el-text class="goview" @click="waitCheck(item.route)">前往查看</el-text>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <div
              v-else
              class="nodata"
              style="width: 100px; margin: 0 auto"
              :style="`height:calc(${contHeight}px*0.34)`"
            >
              <img src="@/assets/imgs/noneData.png" alt="" />
              <div>暂无数据</div>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="noticeItem">
          <div v-loading="noticeLoading">
            <div class="flex justify-between mb-10px">
              <el-text class="title">消息通知</el-text>
              <div class="rightBtn" v-if="noticeData.length > 0">
                <el-button type="primary" size="small" plain @click="markRead">标记已读</el-button>
                <el-button type="primary" size="small" @click="newsAllRead">全部已读</el-button>
                <el-pagination
                  class="ml-8px"
                  background
                  @current-change="noticeCurrentChange"
                  :current-page="noticeParams.pageNo"
                  @size-change="noticeSizeChange"
                  :page-size="noticeParams.pageSize"
                  layout="prev, next"
                  :total="noticeTotal"
                />
              </div>
            </div>
            <div v-if="noticeData.length > 0">
              <div class="noticeCard" :style="`height:calc(${contHeight}px*0.23)`">
                <div>
                  <el-scrollbar :height="`calc(${contHeight}px*0.33)`">
                    <div v-for="(item, index) in noticeData" :key="index" class="noticeContent">
                      <input
                        :value="selectedNotice"
                        @input="handleCheckboxChange(item.id)"
                        type="checkbox"
                      />
                      <div class="contentText">{{ item.content }}</div>
                      <div class="rightTime">
                        <div>{{ formatDate(item.createTime) }}</div>
                        <el-text class="goview" @click="waitCheck(item.route)">前往查看</el-text>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <div
              v-else
              class="nodata"
              style="width: 100px; margin: 0 auto"
              :style="`height:calc(${contHeight}px*0.33)`"
            >
              <img src="@/assets/imgs/noneData.png" alt="" />
              <div>暂无数据</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card shadow="never" class="abnormalItem">
          <div v-loading="abnormaLoading">
            <div class="flex justify-between mb-10px">
              <el-text class="title">异常信息</el-text>
              <div class="flex justify-between" v-if="abnormaData.length > 0">
                <el-button type="primary" size="small" plain @click="processed">已处理</el-button>
                <el-pagination
                  class="ml-8px"
                  background
                  @current-change="abnormaCurrentChange"
                  :current-page="noticeParams.pageNo"
                  @size-change="abnormaSizeChange"
                  :page-size="noticeParams.pageSize"
                  layout="prev, next"
                  :total="abnormaTotal"
                />
              </div>
            </div>
            <div v-if="abnormaData.length > 0">
              <div class="abnormalCard" :style="`height:calc(${contHeight}px*0.34)`">
                <div>
                  <el-scrollbar :height="`calc(${contHeight}px*0.34)`">
                    <div v-for="(item, index) in abnormaData" :key="index" class="abnormalContent">
                      <!-- <el-checkbox v-model="selectedAbnormal[index]" :true-label="item.content" /> -->
                      <input
                        :value="selectedAbnormal"
                        @input="handleAbnormalCheckboxChange(item.id)"
                        type="checkbox"
                      />
                      <div class="contentText">{{ item.content }}</div>
                      <div class="rightTime">{{ formatDate(item.createTime) }}</div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <div
              v-else
              class="nodata"
              style="width: 100px; margin: 0 auto"
              :style="`height:calc(${contHeight}px*0.34)`"
            >
              <img src="@/assets/imgs/noneData.png" alt="" />
              <div>暂无数据</div>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="bulletinItem">
          <div v-loading="bulletinLoading">
            <div class="flex justify-between mb-10px">
              <el-text class="title">系统公告</el-text>
              <div v-if="bulletinData.length > 0">
                <el-pagination
                  background
                  @current-change="bulletinCurrentChange"
                  :current-page="noticeParams.pageNo"
                  @size-change="bulletinSizeChange"
                  :page-size="noticeParams.pageSize"
                  layout="prev, next"
                  :total="bulletinTotal"
                />
              </div>
            </div>
            <div v-if="bulletinData.length > 0">
              <div class="bulletinCard" :style="`height:calc(${contHeight}px*0.33)`">
                <div>
                  <el-scrollbar :height="`calc(${contHeight}px*0.33)`">
                    <div v-for="(item, index) in bulletinData" :key="index" class="bulletinContent">
                      <div class="contentText">{{ item.content }}</div>
                      <div class="rightTime">{{ formatDate(item.createTime) }}</div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <div
              v-else
              class="nodata"
              style="width: 100px; margin: 0 auto"
              :style="`height:calc(${contHeight}px*0.33)`"
            >
              <img src="@/assets/imgs/noneData.png" alt="" />
              <div>暂无数据</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <Shortcut ref="shortcutRef" @success="getListShow" />
</template>
<script lang="ts" setup>
import Shortcut from './Shortcut.vue'
import { formatDate, formatAxis } from '@/utils/formatTime'
import * as HomeApi from '@/api/home'
import { getUserProfile } from '@/api/system/user/profile'
import { useUserStore } from '@/store/modules/user'
import avatarImg from '@/assets/imgs/avatar.jpg'
import type { label, QueryParams, info } from './types'
// import { pieOptions, barOptions } from './echarts-data'formatDate,
const { push } = useRouter()
defineOptions({ name: 'Home' })
const message = useMessage() // 消息弹窗

const contHeight = ref(0)
const messagesData = ref([])
const usersData = ref<label[]>([]) // 标签
const greetings = ref() // 问候
const waitData = ref<info[]>([]) // 待办事项
const noticeData = ref<info[]>([]) // 消息通知
const abnormaData = ref<info[]>([]) // 异常信息
const bulletinData = ref<info[]>([]) // 系统公告
const hoemShow = ref(true)
const userStore = useUserStore()
const loading = ref(false)

// 消息通知
// const selectedNotice = ref([] as number[])
const selectedNotice = ref([] as any)
// 异常信息
const selectedAbnormal = ref([] as any)
// 头像
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const waitTotal = ref(0) // 待办列表的总页数
const waitLoading = ref(false)
const waitParams: QueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userId: 0,
  type: 0,
  event: 0
})
const noticeTotal = ref(0) // 消息列表的总页数
const noticeLoading = ref(false)
const noticeParams: QueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userId: 0,
  type: 0,
  event: 0,
  state: 0
})
const abnormaTotal = ref(0) // 异常信息的总页数
const abnormaLoading = ref(false)
const abnormaParams: QueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userId: 0,
  type: 0,
  state: 0
})
const bulletinTotal = ref(0) // 公告列表的总页数
const bulletinLoading = ref(false)
const bulletinParams: QueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userId: 0,
  type: 0
})

const username = userStore.getUser.nickname
// const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption

const usepageData = ref<any[]>([])
//获取快捷窗口数据
const getShortcutWindowData = async () => {
  loading.value = true
  try {
    let userId = userStore.getUser.id
    const res = await HomeApi.getShortcutWindow(userId)
    usepageData.value = res.list
    provide('myValue', res.list)
  } finally {
    loading.value = false
  }
}
// 快捷跳转
const jumpPage = (path) => {
  push({ path })
}
// 获取消息数量
const getMessagesList = async () => {
  loading.value = true
  try {
    let data = {
      userId: userStore.getUser.id
    }
    const res = await HomeApi.getMessageList(data)
    messagesData.value = res
    const users = await getUserProfile()
    usersData.value = users.roles
    greetings.value = users.loginDate
  } finally {
    loading.value = false
  }
}
// 获取待办事项消息列表
const getWaitList = async () => {
  waitLoading.value = true
  try {
    waitParams.userId = userStore.getUser.id
    waitParams.type = 1
    const res = await HomeApi.getPageList(waitParams)
    waitData.value = res.list
    waitTotal.value = res.total
  } finally {
    waitLoading.value = false
  }
}

const waitCurrentChange = (val: number) => {
  waitParams.pageNo = val
  getWaitList()
}
const waitSizeChange = (val: number) => {
  waitParams.pageSize = val
  getWaitList()
}

// 待办查看
const waitCheck = async (route: string) => {
  push(route)
}

// 获取消息通知列表
const getNoticeList = async () => {
  noticeLoading.value = true
  try {
    noticeParams.userId = userStore.getUser.id
    noticeParams.type = 2
    const res = await HomeApi.getPageList(noticeParams)
    noticeData.value = res.list
    noticeTotal.value = res.total
  } finally {
    noticeLoading.value = false
  }
}

const noticeCurrentChange = (val: number) => {
  noticeParams.pageNo = val
  getNoticeList()
}
const noticeSizeChange = (val: number) => {
  noticeParams.pageSize = val
  getNoticeList()
}
// 消息全部已读
const newsAllRead = async () => {
  noticeLoading.value = true
  try {
    let data = {
      userId: userStore.getUser.id,
      type: 2
    }
    await HomeApi.checkNewsAll(data)
    getNoticeList()
  } finally {
    noticeLoading.value = false
  }
}
// const selectedIds = ref<number[]>([]) //勾选的id
const handleCheckboxChange = (id: number) => {
  const index = selectedNotice.value.indexOf(id)
  if (index !== -1) {
    selectedNotice.value.splice(index, 1) // 取消勾选时从数组中删除id
  } else {
    selectedNotice.value.push(id) // 勾选时将id插入数组
  }
}

// 消息标记已读
const markRead = async () => {
  noticeLoading.value = true
  try {
    if (selectedNotice.value) {
      message.notifyError('请选择标记信息!')
      return
    }
    let data = {
      type: 2,
      state: true,
      ids: Array.from(Object.values(selectedNotice.value)) as number[]
    }
    await HomeApi.checkNewsMarK(data)
    getNoticeList()
  } finally {
    noticeLoading.value = false
  }
}

// 获取异常消息列表
const getAbnormaList = async () => {
  abnormaLoading.value = true
  try {
    abnormaParams.userId = userStore.getUser.id
    abnormaParams.type = 3
    const res = await HomeApi.getPageList(abnormaParams)
    abnormaData.value = res.list
    abnormaTotal.value = res.total
  } finally {
    abnormaLoading.value = false
  }
}

const abnormaCurrentChange = (val: number) => {
  abnormaParams.pageNo = val
  getAbnormaList()
}
const abnormaSizeChange = (val: number) => {
  abnormaParams.pageSize = val
  getAbnormaList()
}

// 获取系统公告列表
const getBulletinList = async () => {
  bulletinLoading.value = true
  try {
    bulletinParams.userId = userStore.getUser.id
    bulletinParams.type = 4
    const res = await HomeApi.getPageList(bulletinParams)
    bulletinData.value = res.list
    bulletinTotal.value = res.total
  } finally {
    bulletinLoading.value = false
  }
}
const bulletinCurrentChange = (val: number) => {
  bulletinParams.pageNo = val
  getBulletinList()
}
const bulletinSizeChange = (val: number) => {
  bulletinParams.pageSize = val
  getBulletinList()
}
// 编辑快捷键
const shortcutRef = ref()
const editRef = () => {
  hoemShow.value = false
  shortcutRef.value.openShortcut()
}
const getListShow = () => {
  getShortcutWindowData()
  hoemShow.value = true
}

// 异常信息已处理
const processed = async () => {
  abnormaLoading.value = true
  try {
    let data = {
      type: 3,
      state: true,
      ids: Array.from(Object.values(selectedAbnormal.value)) as number[]
    }
    await HomeApi.checkNewsMarK(data)
    getAbnormaList()
  } finally {
    abnormaLoading.value = false
  }
}
//异常信息勾选
const handleAbnormalCheckboxChange = (id: number) => {
  const index = selectedAbnormal.value.indexOf(id)
  if (index !== -1) {
    selectedAbnormal.value.splice(index, 1) // 取消勾选时从数组中删除id
  } else {
    selectedAbnormal.value.push(id) // 勾选时将id插入数组
  }
}
const getAllApi = async () => {
  await Promise.all([
    getMessagesList(),
    getWaitList(),
    getAbnormaList(),
    getNoticeList(),
    getBulletinList(),
    getShortcutWindowData() //获取快捷窗口数据
    // getProject(),
    // getNotice()
  ])
  loading.value = false
}

getAllApi()
onMounted(() => {
  contHeight.value = document.body.clientHeight - 127
})
</script>
<style lang="scss" scoped>
.messages {
  color: #2cc0bc;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cardUserName {
  margin: 10px 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep.el-tag {
  color: #2cc0bc;
  background-color: #ebf9f9;
  border: 1px solid #c0eceb;
  font-size: 12px;
}
.functionPage {
  .shortcut {
    color: #9ca3af;
  }
  .edit {
    cursor: pointer;
    color: #2cc0bc;
  }
  .edit:hover {
    color: #00ada8;
  }
  .pageJump {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #666;
    .icon {
      margin-bottom: 6px;
    }
    .menuName {
      font-size: 13px;
    }
  }
  .pageJump:hover {
    color: #2cc0bc;
  }
}
.nodata {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.divClasses {
  height: 100%; /* 设置滚动容器的高度 */
  overflow: auto; /* 显示滚动条 */
}
.title {
  font-size: 16px;
  font-weight: 700;
}
.waitCard {
  overflow: hidden;
  .waitTerm {
    display: flex;
    margin: 12px 2px 12px 0;
    padding: 4px 4px;
    border-radius: 3px;
    color: #666;
    border: 1px solid #e4e7ed;
    .contentText {
      flex: 1;
      color: #595959;
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .right {
      width: 240px;
      display: flex;
      margin-left: 5px;
      // justify-content: flex-end;
      .goview {
        font-size: 12px;
        line-height: 24px;
        background-color: #2cc0bc;
        margin-left: 20px;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
        padding: 0px 4px;
      }
    }
  }
  .waitTerm:first-child {
    margin-top: 0;
  }
}
.abnormalCard {
  overflow: hidden;
  .abnormalContent {
    display: flex;
    margin-right: 2px;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0px;
    .rightTime {
      width: 160px;
      margin-left: 5px;
    }
    .contentText {
      flex: 1;
      margin-left: 8px;
      color: #595959;
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.noticeItem {
  margin-top: 10px;
  .rightBtn {
    display: flex;
    align-items: center;
  }
  .noticeCard {
    overflow: hidden;
    .noticeContent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 4px;
      margin: 12px 2px 12px 0;
      border-radius: 3px;
      color: #666;
      border: 1px solid #e4e7ed;
      .contentText {
        flex: 1;
        margin-left: 8px;
        color: #595959;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .rightTime {
        width: 240px;
        display: flex;
        margin-left: 5px;
        .goview {
          font-size: 12px;
          line-height: 24px;
          background-color: #2cc0bc;
          margin-left: 20px;
          color: #fff;
          border-radius: 3px;
          cursor: pointer;
          padding: 0px 4px;
        }
      }
    }
    .noticeContent:first-child {
      margin-top: 0;
    }
  }
}
.bulletinItem {
  margin-top: 10px;
  .bulletinCard {
    overflow: hidden;
    .bulletinContent {
      display: flex;
      margin-right: 2px;
      justify-content: space-between;
      line-height: 32px;
      padding: 1px 0;
      .contentText {
        flex: 1;
        color: #595959;
        font-weight: 500;
        font-size: 14px;
        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .rightTime {
        width: 160px;
        display: flex;
        margin-left: 5px;
      }
    }
  }
}

input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  position: relative;
}
input[type='checkbox']::after {
  position: absolute;
  top: 0;
  color: #fff;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
  border-radius: 3px;
}
input[type='checkbox']:checked::after {
  content: '✓';
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  background-color: #2cc0bc;
}

::v-deep .el-pagination.is-background .btn-next {
  background-color: #2cc0bc;
  height: 24px;
}
::v-deep .el-pagination.is-background .btn-next .el-icon {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

::v-deep .el-pagination.is-background .btn-prev {
  background-color: #2cc0bc;
  height: 24px;
}
::v-deep .el-pagination.is-background .btn-prev .el-icon {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.iconStyle {
  font-size: 30px;
}
</style>
